<template>
  <el-card shadow="never" style="margin-top: 15px">
    <div class="head-container">
      <el-tooltip class="item" effect="dark" content="返回" placement="right-start">
        <el-button type="text" @click="returnCouponsList" style="margin-left: 10px">
          <svg t="1708609271658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5331" width="30" height="30">
            <path d="M257.2 567.1h584.5c29 0 52.5-23.4 52.5-52.2V512c0-28.8-23.5-52.2-52.5-52.2H255.9L431 284.1c20.2-20.3 20.2-53 0-73.3l-0.4-0.4c-20.2-20.3-53.1-20.5-73.6-0.5l-0.5 0.5L71.8 496.1a26.013 26.013 0 0 0 0 36.7l55.7 55.9L352 813.8c20.4 20.5 53.7 20.6 74.3 0.4l0.4-0.4 1.7-1.7c20.3-20.3 20.3-53.1 0-73.4L257.2 567.1z" p-id="5332" fill="#515151"></path>
          </svg>
        </el-button>
      </el-tooltip>
    </div>
    <div style="margin-top: 20px">
      <span v-show="coupons.state==0" style="color: #F56C6C;">● 当前优惠券状态：禁用</span>
      <span v-show="coupons.state==1" style="color: #67C23A;">● 当前优惠券状态：启用</span>
    </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <div v-show="coupons.couponsType==1">
        <el-row>
          <el-col :span="6" class="table-cell-title">优惠券序号</el-col>
          <el-col :span="6" class="table-cell-title">优惠券名称</el-col>
          <el-col :span="6" class="table-cell-title">优惠券类型</el-col>
          <el-col :span="6" class="table-cell-title">代金券的代替金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{coupons.couponsId}}</el-col>
          <el-col :span="6" class="table-cell">{{coupons.couponsName}}</el-col>
          <el-col :span="6" class="table-cell">代金券</el-col>
          <el-col :span="6" class="table-cell">{{coupons.value}}￥</el-col>
        </el-row>
      </div>
      <div v-show="this.coupons.couponsType==2">
        <el-row>
          <el-col :span="6" class="table-cell-title">优惠券序号</el-col>
          <el-col :span="6" class="table-cell-title">优惠券名称</el-col>
          <el-col :span="6" class="table-cell-title">优惠券类型</el-col>
          <el-col :span="6" class="table-cell-title">最低消费金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{coupons.couponsId}}</el-col>
          <el-col :span="6" class="table-cell">{{coupons.couponsName}}</el-col>
          <el-col :span="6" class="table-cell">满减劵</el-col>
          <el-col :span="6" class="table-cell">{{coupons.minimumAmount}}￥</el-col>
        </el-row>
      </div>
        <el-row>
          <el-col :span="6" class="table-cell-title">开始时间</el-col>
          <el-col :span="6" class="table-cell-title">结束时间</el-col>
          <el-col :span="6" class="table-cell-title">创建时间</el-col>
          <el-col :span="6" class="table-cell-title">更新时间</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{coupons.startDate}}</el-col>
          <el-col :span="6" class="table-cell">{{coupons.endDate}}</el-col>
          <el-col :span="6" class="table-cell">{{coupons.createdAt}}</el-col>
          <el-col :span="6" class="table-cell" v-if="coupons.updatedAt">{{coupons.updatedAt}}</el-col>
          <el-col :span="6" class="table-cell" v-else>暂无</el-col>
          <el-popover
              placement="top-start"
              title="活动信息"
              width="200"
              trigger="hover"
              :content="order.promotionInfo"
          >
            <template v-slot:reference>
              <span>{{order.promotionInfo}}</span>
            </template>
          </el-popover>
        </el-row>
    </div>
    <div style="margin-top: 20px">
      <span class="font-small">广告商信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="8" class="table-cell-title">广告主</el-col>
        <el-col :span="8" class="table-cell-title">广告主公司</el-col>
        <el-col :span="8" class="table-cell-title">广告主的官方网站</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{coupons.userName}}</el-col>
        <el-col :span="8" class="table-cell">{{coupons.companyName}}</el-col>
        <el-col :span="8" class="table-cell">{{coupons.website}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">主要联系人姓名</el-col>
        <el-col :span="8" class="table-cell-title">广告主联系方式</el-col>
        <el-col :span="8" class="table-cell-title">广告主邮箱</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{coupons.contactName}}</el-col>
        <el-col :span="8" class="table-cell">{{coupons.userPhone}}</el-col>
        <el-col :span="8" class="table-cell">{{coupons.userEmail }}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
     <span class="font-small">优惠券描述</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="8" class="table-cell-title">优惠券描述</el-col>
        <el-col :span="16" class="table-cell1">{{coupons.description}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">优惠券使用条件</el-col>
        <el-col :span="16" class="table-cell1">{{coupons.condition}}</el-col>
      </el-row>
      <el-row v-show="this.coupons.couponsType==4">
        <el-col :span="8" class="table-cell-title">兑换商品图片</el-col>
        <el-col :span="16" class="table-cell2">
          <el-image style="width: 100px; height: 100px" :src="coupons.productImageUrl"/>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default{
  name: "userManagement",
  data() {
    return {
      id: null,
      coupons: [],
      order:[],
      couponsData:[],
      orderStatus: null,
      getState:"",
      value1: '',
      value2: '',
      // 搜索框内容
      inputForm:{
        studentId: null,
        commodityId:null
      },
      couponsId:0,
    }
  },
  methods: {
    async getCouponDetail() {
      try {
        const res = await axios.post('/couponsManage/getCouponDetails/'+this.couponsId);
        if (res.status === 200) {
          this.coupons = res.data.data[0];
          this.couponsData= res.data.data;
          console.log('優惠券详情数据:', this.coupons);
          console.log('商品詳情:', this.coupons.userName);

        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取優惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取優惠券数据失败');
      }
    },

    //訂單詳情
    returnCouponsList(){
      this.$router.push({path:'/couponManagement/CouponList'})
    },
  },

  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {

  },
  created() {
    this.couponsId = this.list = this.$route.query.couponsId;
    console.log("当前優惠券编号",this.couponsId);
  },
  mounted() {
    this.getCouponDetail();
  }
}
</script>
<style scoped>
.icon-svg:hover path {
  fill: #76cb02;
}

.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.head-container {
  background: #F2F6FC;
  height: 50px;
  margin: -20px -20px 0;
  line-height: 50px;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
  display: flex;
  justify-content: center;
}

.table-cell1 {
  height: 45px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.table-cell2 {
  height: 120px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
</style>